<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Zend Framework</title>
<style type="text/css">
	.content {
		background-color: #FAF8DD;
		margin-bottom: 30px;
		padding: 15px;
		width: 700px;
		
	}
	.title {
		border-bottom: 1px solid #C97A7A;
		margin: 10px;
		padding-bottom: 5px;
		font-style: bold;
		font-size: 20px;
		text-align: left;
	}
	.description {
		margin: 10px;
		text-align: justify;
	}
</style>
</head>

<script type="text/javascript">

	var position = 5;
	var isload	= 'load';

	$(document).ready(function(){
		$('#list-article').load('<?php echo $this->url(array('action'=>'load-scroll'));?>');
	});
	
	$(window).scroll(function(){
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
        	lastPostFunc();
        }
	});
	
	function lastPostFunc(){
		if(isload=='load'){
		    $.ajax({
				url: "<?php echo $this->url(array('action'=>'load-scroll'));?>",
				data: { position: position },
				success: function(data){
					isload = 'no-load';
					if (data.length > 0) {
			        	position += 2;     
			       		isload = 'load';
			       		$(".content:last").after(data);
			        }
				}
			});
		}
	}
</script>

<body>
	<center>
		<h1>Zend Framework: Load Data Content</h1>
		<div id="list-article"></div>
	</center>
</body>
</html>
